---
description: Best Choice for MySQL Users To Build AI Apps
type: posts
---

import { getPagesUnderRoute } from "nextra/context";
import Link from "next/link";

export function BlogHeader() {
  return (
    <div className="max-w-screen-lg mx-auto pt-4 pb-8 mb-16 border-b border-gray-400 border-opacity-20">
      <h1>
        <span className="font-bold leading-tight lg:text-5xl">Practical Usage Blog</span>
      </h1>
      <p className="text-center text-gray-500 dark:text-gray-400 font-space-grotesk">
        The ONLY Database Needed for MySQL Users To Build AI Apps
      </p>
    </div>
  );
}

export function BlogIndex() {
  return getPagesUnderRoute("/blog").map((page) => {

    // If the page has a `href` front matter item, we'll render it as an external link
    const externalLinkProps = page.frontMatter.href
      ? {
          href: page.frontMatter.href,
          target: "_blank",
          rel: "noopener noreferrer",
        }
      : {};

    return (
      <div key={page.route} className="mb-10">
        <Link
          href={page.route}
          style={{ color: "inherit", textDecoration: "none" }} className="block font-semibold mt-8 text-2xl"
          {...externalLinkProps}
          >
            {page.meta?.title || page.frontMatter?.title || page.name}
        </Link>
        <p className="opacity-80" style={{ marginTop: ".5rem" }}>
          {page.frontMatter?.description}
          <span className="inline-block">
            <Link href={page.route} className="ml-4 opacity-60 hover:opacity-100">{" Read more →"}</Link>
          </span>
        </p>
        {page.frontMatter?.date ? (
          <p className="opacity-50 text-sm">{page.frontMatter.date}</p>
        ) : null}
      </div>
    );

});
}

<BlogHeader />
<BlogIndex />
